<template>
    <div v-cloak style="height: 100vh;background-color: white">

        <mu-appbar style="width: 100%; height: 7vh;" color="primary" id="aaaa">
            <mu-button icon slot="left" @click="open = true">
                <mu-icon value="menu"></mu-icon>
            </mu-button>
            美美护肤养颜馆-管理系统
        </mu-appbar>
        <mu-container style="padding:12px;width: 100%;
        height: 92vh;overflow-y: auto;background-color: #f5f5f5;">
            <!--            公告-->
            <mu-paper round :z-depth="1" style="border-radius:5px">
                <mu-container style="padding:10px">
                    <div style="display: flex;flex-direction:column">

                        <div class="" style="display: flex;align-items: center;height: 25px">
                            <i class="iconfont icon-gonggao1" style="font-size: 35px;color: #f77a51"></i>
                            <div
                                    style="background-color:#d5d5d5!important;margin-right:15px;width: 1px;margin-left:15px;height: 100%;"></div>
                            <div style="font-family: 黑体;font-size: 13px">暂未有公告</div>

                        </div>


                    </div>

                </mu-container>
            </mu-paper>
            <!--            功能列表-->
            <mu-paper round :z-depth="4" style="border-radius:10px;margin-top: 20px;padding-bottom: 20px">
                <mu-container style="padding:10px">
                    <div style="display: flex;flex-direction:column">
                        <!--                            -->
                        <div class="font-menu" style="display: flex;align-items: center;letter-spacing: 2px">
                            <mu-icon value="filter_list" color="blue"></mu-icon>
                            <span>&nbsp;功能列表</span>
                            <div></div>
                        </div>
                        <!--                            功能-->
                        <div style="display: flex;flex-wrap:wrap;">

                            <div v-for="(item,index) in menuList" class="menu-list"
                                 style="display: flex;flex-direction: column;flex: 0 0 20%;"
                                 :key="index">
                                <router-link :to="item.route"
                                             style="display:flex;align-items: center;justify-content:
                                             center;flex-direction: column">
                                    <div
                                            :style="{backgroundColor:item.bkColor,textAlign:'center',display:'flex',alignItems:'center',justifyContent:'center',width:'9vw',height:'9vw',borderRadius:'6px'}">
                                        <i :class="'iconfont icon-'+item.icon"
                                           style="color: white;font-size: 16px"></i>
                                    </div>
                                    <div class="font-menu-list"
                                         style="text-align: center;letter-spacing: 1px;margin-top: 5px;font-size: 10px">
                                        {{item.title}}
                                    </div>
                                </router-link>
                            </div>
                        </div>

                    </div>

                </mu-container>
            </mu-paper>
            <!--            店铺数据-->
            <mu-paper round :z-depth="4" style="border-radius:10px;margin-top: 20px;padding-bottom: 20px">
                <mu-container style="padding:10px">
                    <div style="display: flex;flex-direction:column">
                        <!--                            -->
                        <div class="font-menu" style="display: flex;align-items: center;letter-spacing: 2px">
                            <mu-icon value="insert_chart" color="blue"></mu-icon>
                            <span>&nbsp;店铺数据</span>
                            <div></div>
                        </div>
                        <!--                            店铺数据-->
                        <div style="display: flex;flex-wrap:wrap;">

                            <div v-for="(item,index) in dataList"
                                 style="display: flex;flex-direction: column;flex: 0 0 33.33%;margin-top: 25px"
                                 :key="index">
                                <div style="text-align: center;;font-size: 18px;;font-family: 幼圆">
                                    {{item.data}}
                                </div>
                                <div
                                        style="margin-top:6px;font-size:12px;color:#a5a5a5;text-align: center;letter-spacing:1.5px">
                                    {{item.title}}
                                </div>
                            </div>
                        </div>

                    </div>

                </mu-container>
            </mu-paper>
            <!--            商品活动-->
            <mu-paper round :z-depth="4" style="border-radius:10px;margin-top: 20px;padding-bottom: 20px">
                <mu-container style="padding:10px">
                    <div style="display: flex;flex-direction:column">
                        <!--                            -->
                        <div class="font-menu" style="display: flex;align-items: center;letter-spacing: 2px">
                            <i class="iconfont icon-huodong" style="font-size: 22px;color: #d108d4"></i>
                            <span>&nbsp;商品活动</span>
                            <div></div>
                        </div>
                        <!--                            店铺数据-->
                        <div
                                style="display: flex;flex-wrap:wrap;justify-content: center;align-items: center;height:20vh">

                            <!--                            <div v-for="item,index in dataList"-->
                            <!--                                 style="display: flex;flex-direction: column;flex: 0 0 33.33%;margin-top: 25px"-->
                            <!--                                 :key="index">-->
                            <!--                                <div style="text-align: center;;font-size: 18px;;font-family: 幼圆">-->
                            <!--                                    {{item.data}}-->
                            <!--                                </div>-->
                            <!--                                <div-->
                            <!--                                        style="margin-top:6px;font-size:12px;color:#a5a5a5;text-align: center;letter-spacing:-->
                            <!--                                    1.5px">-->
                            <!--                                    {{item.title}}-->
                            <!--                                </div>-->
                            <!--                            </div>-->
                            待 开 发
                        </div>

                    </div>

                </mu-container>
            </mu-paper>
            <!--            任务中心-->
            <mu-paper round :z-depth="4" style="border-radius:10px;margin-top: 20px;padding-bottom: 20px">
                <mu-container style="padding:10px">
                    <div style="display: flex;flex-direction:column">
                        <!--                            -->
                        <div class="font-menu" style="display: flex;align-items: center;letter-spacing: 2px">
                            <i class="iconfont icon-renwu" style="font-size: 22px;color: #4b9a21"></i>
                            <span>&nbsp;任务中心</span>
                            <div></div>
                        </div>
                        <!--                            -->
                        <div style="display: flex;flex-wrap:wrap;height:20vh;justify-content: center;align-items: center">

                            <!--                            <div v-for="item,index in dataList"-->
                            <!--                                 style="display: flex;flex-direction: column;flex: 0 0 33.33%;margin-top: 25px"-->
                            <!--                                 :key="index">-->
                            <!--                                <div style="text-align: center;;font-size: 18px;;font-family: 幼圆">-->
                            <!--                                    {{item.data}}-->
                            <!--                                </div>-->
                            <!--                                <div-->
                            <!--                                        style="margin-top:6px;font-size:12px;color:#a5a5a5;text-align: center;letter-spacing:-->
                            <!--                                    1.5px">-->
                            <!--                                    {{item.title}}-->
                            <!--                                </div>-->
                            <!--                            </div>-->
                            待 开 发
                        </div>

                    </div>

                </mu-container>
            </mu-paper>

        </mu-container>
        <mu-drawer :open.sync="open" :docked="docked" :right="position === 'right'">
            <mu-list>
                <mu-list-item button>
                    <mu-list-item-title>Menu Item 1</mu-list-item-title>
                </mu-list-item>
                <mu-list-item button>
                    <mu-list-item-title>Menu Item 2</mu-list-item-title>
                </mu-list-item>
                <mu-list-item @click="open = false" button>
                    <mu-list-item-title>Close</mu-list-item-title>
                </mu-list-item>
            </mu-list>
        </mu-drawer>
    </div>
</template>

<script>

    export default {
        name: 'app',
        data() {
            return {
                docked: false,
                open: false,
                position: 'left',
                selected: "",
                mvvm: {
                    headerText: ""
                },
                // 菜单列表
                menuList: [
                    {
                        title: "订单",
                        route: "order",
                        icon: "dingdan",
                        bkColor: "#06b6f6"
                    },
                    {
                        title: "出库",
                        route: "outStorage",
                        icon: "chuku",
                        bkColor: "#0624f3"
                    },
                    {
                        title: "数据采集",
                        route: "data",
                        icon: "shujucaiji1",
                        bkColor: "#9ce272"
                    },
                    {
                        title: "进货",
                        route: "",
                        icon: "jinhuo",
                        bkColor: "#0624f3"
                    },
                    {
                        title: "盘点",
                        route: "inventory",
                        icon: "pandian",
                        bkColor: "#36a0a7"
                    },
                    {
                        title: "支出明细",
                        route: "expendDetail",
                        icon: "zhichumingxi",
                        bkColor: "#ed4409"
                    },
                    {
                        title: "工资结算",
                        route: "calculateWages",
                        icon: "gongzitiao",
                        bkColor: "#06b6f6"
                    }
                ],
                // 数据列表
                dataList: [
                    {
                        title: "今日订单数",
                        data: "--"
                    },
                    {
                        title: "昨日订单数",
                        data: "--"
                    },
                    {
                        title: "上月成交额",
                        data: "--"
                    },
                    {
                        title: "本月成交额",
                        data: "--"
                    },
                    {
                        title: "待定",
                        data: "--"
                    }
                ]
            }
        },
        created(){
            // if (!window.getRequest().redirect) {
            //     window.checkPCorMobile()
            // }
        },
        components: {}
    }
</script>

<style>
    /*a:-webkit-any-link {*/
    /*text-decoration: none;*/
    /*}*/
    /*.router-link-active {*/
    /*text-decoration: none;*/
    /*}*/
    [v-cloak] {
        display: none;
    }

    .menu-group {
        height: 7vh;
        width: 100%;
        text-align: center;
        font-size: 18px;
        background-color: #f5f5f5;
        display: flex;
        align-items: center;

    }

    .menu-header {
        display: table-cell;
        margin: 0 auto;
    }

    .mu-appbar-title {
        font-size: 16px !important;
    }

    .menu {
        margin: 10px 0 10px 10px;
    }

    .divid {
        width: 100%;
        background-color: #dddddd;
        height: 1px;
    }

    .font-menu {
        font-size: 16px;
        font-family: 楷体;
        font-weight: bold;
    }

    .menu-list {
        margin-top: 15px;
    }

    .font-menu-list {
        font-size: 12px;
        color: black;
    }

    label.error{
        color: red;
    }
</style>
